<template>
  <div class="login">
    <el-col :span="12">
      <div class="login_img">
        <img src="http://www.dmaku.com/demo/moban/2019081254544949/picture/login-img.png"
             alt="#">
      </div>
    </el-col>
    <el-col :span="12">
      <div class="login_contain"
           style="position: relative;z-index:1">
        <div class="login_logo">
          <a href="#">
            <img src="http://www.dmaku.com/demo/moban/2019081254544949/picture/login_logo.png"
                 alt="#">
          </a>
        </div>
        <div v-if="showslideVerify === true"
             style="position: absolute;z-index:10;margin-left:-25px;margin-top:30px">
          <!-- <div style="display:flex;align-items:center;width:500px;margin:0 auto;padding-bottom:20px;"> -->
          <slide-verify ref="slideblock"
                        :l="42"
                        :r="10"
                        :w="370"
                        :h="200"
                        @again="onAgain"
                        @fulfilled="onFulfilled"
                        @success="onSuccess"
                        @fail="onFail"
                        @refresh="onRefresh"
                        :accuracy="accuracy"
                        :slider-text="text"></slide-verify>
        </div>
        <div class="login_name">
          <p>信易运物流订舱系统</p>
        </div>

        <!-- <form action="" method="post"> -->
        <el-input class="input_username"
                  placeholder="用户名"
                  v-model="username"
                  clearable
                  autocomplete="on"></el-input>
        <el-input class="input_password"
                  placeholder="密码"
                  v-model="password"
                  show-password
                  autocomplete="on"
                  @keyup.enter.native="Verify"></el-input>
        <div class="btn">
          <el-button class="button-1"
                     type="primary"
                     @click="register"
                     v-show="showslideVerify === false">注册</el-button>
          <el-button class="button-2"
                     type="primary"
                     @click="Verify"
                     v-show="showslideVerify === false">登录</el-button>
        </div>

      </div>
    </el-col>
    <div class="login_foot">蔡俊益个人毕业设计 版权所有@2021-2022 <br>联系电话：18814205010</div>

  </div>
</template>

<script>
// import slideVerify from './components/slideVerify.vue'
export default {
  // components: { slideVerify },
  name: 'Login',
  // props: {
  //   msg: String
  // },
  data () {
    return {
      username: '',
      password: '',
      userinfo: {},
      // 图片验证
      showslideVerify: false,
      msg: "",
      text: "向右滑",
      // 精确度小，可允许的误差范围小；为1时，则表示滑块要与凹槽完全重叠，才能验证成功。默认值为5
      accuracy: 5,
      textcolor: 'red'
    }
  },
  methods: {
    register () {
      this.$router.push('/register')
    },
    Verify () {
      this.showslideVerify = true
    },
    login () {
      const api = `login?username=${this.username}&password=${this.password}`
      this.$axios.get(api)
        .then(res => {

          if (res.data.length == 0) {
            this.$message({
              type: 'error',
              message: '登陆失败!'
            });
          } else {
            this.userinfo = res.data[0]
            if (this.username === this.userinfo.username && this.password === this.userinfo.password) {
              this.$store.commit('SET_USERINFO', this.userinfo)
              console.log('用户', this.userinfo.name, '登录成功')
              this.$router.push('/PageView')
            } else {
              this.$message({
                type: 'warning',
                message: '登陆数据有误!'
              });
            }
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 验证成功，触发该方法
    onSuccess (times) {
      let ms = (times / 1000).toFixed(1);
      this.$message({
        duration: 1000,
        type: 'success',
        message: "验证成功, 耗时 " + ms + "s"
      });
      this.login()
      this.showslideVerify = false;
    },
    onFail () {
      console.log("验证不通过");
      this.$message({
        duration: 1500,
        type: 'warning',
        message: `try again`
      });
    },
    onRefresh () {
      console.log("点击了刷新小图标");
    },
    onFulfilled () {
      console.log("刷新成功啦！");
    },
    onAgain () {
      console.log("检测到非人为操作的哦！");
      this.$message({
        duration: 1500,
        type: 'warning',
        message: `try again`
      });
      // 刷新
      this.$refs.slideblock.reset();
    },
    handleClick () {
      // 父组件直接可以调用刷新方法
      this.$refs.slideblock.reset();
    },
    handleClose () {
      // console.log("val", val);
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped >
.login {
  height: 100%;
  width: 100%;
  background: #93defe;
  background-size: cover;
  position: fixed;
  padding-top: 170px;
  /* overflow: hidden; */
}
.login_img {
  /* float: left; */
  margin: 0 auto;
  width: 432px;
  height: 440px;
  /* margin-left: 300px; */
}
.login_img img {
  width: 500px;
  height: 440px;
}
img {
  border: none;
}
.login_contain {
  height: 360px;
  width: 420px;
  padding: 50px;
  background-color: #ffffff;
  border-radius: 6px;
  box-sizing: border-box;
  /* float: right; */
  margin: 0 auto;
  /* margin-right: 400px; */
  position: relative;
  margin-top: 50px;
}
.login_logo {
  width: 120px;
  height: 120px;
  border: 5px solid #93defe;
  border-radius: 100px;
  background: #fff;
  text-align: center;
  line-height: 110px;
  position: absolute;
  top: -60px;
  right: 150px;
}
a {
  color: #27a9e3;
  text-decoration: none;
  cursor: pointer;
}
a:-webkit-any-link {
  color: -webkit-link;
  cursor: pointer;
  text-decoration: underline;
}
.login_logo img {
  width: 60px;
  height: 60px;
  display: inline-block;
  vertical-align: middle;
}
.login_name {
  width: 100%;
  float: left;
  text-align: center;
  margin-top: 10px;
}
.login_name p {
  width: 100%;
  text-align: center;
  font-size: 20px;
  color: #444;
  padding: 10px 0 5px;
}
p {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}
.input_username {
  margin-top: 10px;
  padding-left: 0px;
}
.input_password {
  margin-top: 20px;
  padding-left: 0px;
}
.btn {
  display: flex;
  justify-content: center;
}
.el-button {
  margin-top: 30px;
  margin-right: 30px;
}
.login_foot {
  font-size: 15px;
  color: #fff;
  display: block;
  width: 100%;
  float: left;
  text-align: center;
  margin-top: 140px;
}
</style>
